<template>
  <div class="layout" style="margin-bottom: 80px">
    <load :state="loading"></load>
    <div class="headContainer">
      <span style="font-size: 4.8vw;">
        支付成功！
        <svg class="icon txcg" aria-hidden="true">
          <use xlink:href="#icon-txcg_dg"></use>
        </svg>
      </span><br/>
      <div class="return" @click="returnUser">返回个人中心</div>
    </div>
    <div class="main">
      <img :src="userCode">
      <span>达尼蛋糕公众号二维码</span>
    </div>
    <div class="footer">
      <div class="footer_bottom" style="margin-top: 10px">
        <span>了解更多订单、返利消息</span><br/>
        <span>还可以在公众号中直接搜索“一起瘦”</span>
      </div>
    </div>
  </div>
</template>

<script>
  import Load from '../../components/common/load/load';
  export default {
    name: 'success',
    components: {Load},
    data() {
      return {
        loading: false,
        avatar: this.$store.state.login.userPic,
        userUid: this.$store.state.login.userUid,
        userName: this.$store.state.login.userName,
        userCode: 'http://dncake.oss-cn-hangzhou.aliyuncs.com/user/img/qrcode.png'
      };
    },
    methods: {
      returnUser() {
        this.$router.push({name: 'user'});
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .layout
    flex-y()
    width vw(375)
    height vw(667)
    font-family: PingFangSC-Regular
    background url("http://dncake.oss-cn-hangzhou.aliyuncs.com/sucback.png")
    background-size vw(375) vw(667)
  .headContainer
    flex-y()
    position absolute
    top vw(95)
    word-vw(14, first-ash)
    & span{
      line-height vw(20)
      height vw(20)
    }
    & .txcg {
      left vw(223)
      top vw(114)
      width vw(20)
      height vw(20)
      fill #00BB00
    }

  .return
    width vw(180)
    height vw(27)
    border-radius vw(100)
    border 1px solid main-color
    margin-top vw(10)
    word-vw(14, main-color)
    text-align center
    line-height vw(27)

  .main
    position absolute
    top vw(208)
    width vw(148)
    height vw(148)
    & span{
      height vw(20)
      line-height vw(25)
      word-vw(12, first-ash)
      margin-left vw(8)
      text-align center
    }

  .footer
    position absolute
    top vw(366)
    text-align center
    line-height vw(20)
    word-vw(12, first-ash)
</style>
